<template>
  <v-card>
    <v-tabs
      grow
      height="40"
      color="rgb(250,114,152)"
      slider-size="3"
      v-model="tab"
      class="tabs"
      :right="true"
    >
      <v-tab
        active-class="active-vtab"
        class="vtab"
        :value="tab.value"
        :key="tab.value"
        v-for="tab in tabs"
      >
        {{ tab.label }}
      </v-tab>
      <v-tabs-items v-model="tab">
        <v-tab-item><v-card>242</v-card></v-tab-item>
        <v-tab-item>
          <v-card> <recommand></recommand> </v-card>
        </v-tab-item>
        <v-tab-item><v-card>233</v-card></v-tab-item>
        <v-tab-item><v-card>233</v-card></v-tab-item>
      </v-tabs-items>
    </v-tabs>
  </v-card>
</template>

<script>
import Recommand from "./recommend/Recommand";
export default {
  name: "IndexMain",
  components: { Recommand },
  data() {
    return {
      tabs: [
        { value: "zhibo", label: "直播" },
        { value: "tuijian", label: "推荐" },
        { value: "remen", label: "热门" },
        { value: "zhuifan", label: "追番" },
        { value: "yingshi", label: "影视" },
        { value: "shuochang", label: "说唱区" },
        { value: "kangjifeiyan", label: "抗击肺炎" },
        { value: "xiaokang", label: "小康" }
      ],
      tab: 1
    };
  }
};
</script>

<style lang="stylus" scoped>
.tabs >>> .v-slide-group
  position sticky
  top 0px
  z-index 2
.vtab
  min-width 50px
  font-size 16px
  transition font-size 400ms
.active-vtab
  font-size 18px
</style>
